<template>
	<view class="container" :style="{ backgroundColor: bgcolor }">
		<view class="content">
			<view class="scroll-view" :style="!flag ? 'overflow: hidden;' : 'overflow:auto hidden;'">
				<view
					class="scroll-view-content"
					:style="trasitionScroll + 'transform:translateX(-' + scrollLeft + 'px) translateZ(0px)'"
					@touchmove.stop="onTouchMove"
					@touchstart.stop="onTouchStart"
					@touchend.stop="onTouchEnd"
				>
					<view class="item_list" v-for="(item, index2) in goodsList" :key="index2" style=" display: inline-block;">
						<view :style="'background-image: url(' + item.picture + ');'" class="img-item"></view>
						<view class="tit" :style="{backgroundColor:titbg}">{{item.zhuangye_name ? item.zhuangye_name.slice(0,9) : item.huangjin_name.slice(0,9)}}</view>
					</view>
				</view>
			</view>
			<!-- <view><slider :value="scrollLeft" @changing="sliderChange" @change="sliderChangeEnd"  min="0" max="1250" step="2" show-value /></view> -->
		</view>
	</view>
</template>
<script>
export default {
	props: {
		goodsList: {
			type: Array
		},
		bgcolor:{
			type:String
		},
		titbg:{
			type:String
		}
	},
	onLoad() {
		console.log(this.goodsList, '9999999')
	},
	data() {
		return {
			scrollLeft: 0,
			scrollLeftStart: 0,
			timer: '',
			flag: false,
			StartX: 0,
			offsetLeftIndex:1,
			trasitionScroll: 'transition:-webkit-transform 0.3s ease-out 0s;',
		};
	},
	onShow() {
		
	},
	created() {
		this.beginMove();
	},
	onReady() {
		
	},
	methods: {
		beginMove() {
			this.timer = setInterval(() => {
				this.scrollLeft += 100;
				if (this.scrollLeft >= 850) {
					this.flag = true;
					this.trasitionScroll = '';
					this.scrollLeft = 0;
				}
			}, 2200);
		},
		onTouchStart(e) {
			this.scrollLeftStart = this.scrollLeft;
			this.StartX = e.changedTouches[0].clientX;

			this.trasitionScroll = 'transition:-webkit-transform 0.1s ease-out 0s;';
			clearInterval(this.timer);
		},
		onTouchMove(e) {
			this.trasitionScroll = '';
			let value = this.StartX - e.changedTouches[0].clientX;
			if (e.target.offsetLeft + value >= 850 ) {
				this.scrollLeft=770
				return;
			} else if (e.target.offsetLeft + value <= 0) {
				this.scrollLeft = 0;
				return;
			}
			this.scrollLeft = this.scrollLeftStart + value;
		},
		onTouchEnd(e) {
			this.trasitionScroll = 'transition:-webkit-transform 0.3s ease-out 0s;';
			if (this.scrollLeft <= 880) {
				this.timer = setInterval(() => {
					this.scrollLeft += 100;
					if (this.scrollLeft >= 880) {
						this.flag = true;
						this.scrollLeft = 0;
						// clearInterval(this.timer);
					}
				}, 2200);
			}
		},
	}
};
</script>
<style lang="scss">
.content {
	width: 100vw;
	overflow: hidden;
	white-space: nowrap;
	
}
.scroll-view {
		// overflow: auto;
		
}
.scroll-view-content {
			
}
.scroll-view-content .item_list {
	margin: 0rpx 8rpx;
	background-color: #f8f8f8;
	text-align: center;
	color: #000;
	font-size: 24rpx;
	border-radius: 10rpx;
	overflow: hidden;
	
}
.scroll-view-content .img-item {
	width: 220rpx;
	height: 160rpx;
	border-top-left-radius: 6rpx;
	border-top-right-radius: 6rpx;
	background-repeat: no-repeat;
	background-size: cover;
	background-position: 0 40%;
}
.scroll-view-content .tit{
	padding: 4rpx 0rpx 8rpx 0rpx;
	border-bottom-left-radius: 6rpx;
	border-bottom-right-radius: 6rpx;
    overflow:hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
   -o-text-overflow:ellipsis;
}
.scroll-view-content .tit view{
	overflow:hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	-o-text-overflow:ellipsis;
}
/deep/ ::-webkit-scrollbar {
	display: none;
}
</style>

